<template>
	<view>
		<view class="base_body">
			<map  id="dt" ref="dt" longitude="116.405285" latitude="39.904989" scale="4" :polygons="polygons" theme="satellite"  @callouttap="callouttap" :markers="markers" style="width: 750rpx;height: 750rpx;" @markertap="markertap">
				<cover-view slot="callout">  
						  <!-- <template v-for="(item,index) in  markers">
						  			  <cover-view class="callout" :marker-id="item.id">
						  			    <cover-image class="icon" :src="item.ImgUrl"></cover-image>  
						  			    <cover-view class="test">  
						  					<text class="title">
						  						{{item.Name}}
						  					</text>
						  			    </cover-view>  
						  			  </cover-view>  
						  		  </template> -->
								  <cover-view class="callout" :marker-id="10002">
									  <text>测试</text>  
								  </cover-view>
				      </cover-view>
			</map>
			<view class="padding32env">
				<view class="allwrap">
					<view class="jiudian">
						<view class="title">酒店</view>
						<view class="dianliang">
							<view class="dianliang_1">已点亮酒店</view>
							<view class="dianliang_2">{{zuji.hotellist.length}}<text class="dianliang_3">个酒店</text>
							</view>
						</view>
					</view>
					<view class="flexbetween" style="flex-wrap: wrap;">
						<view class="jiudianlist" v-for="(item,index) in zuji.hotellist" :key="index" @click="godetail(item)">
							<view class="name flexbetween">
								<text class="text-1" style="width: 240rpx;height: 32rpx;">{{item.Name}}</text>
								<!-- <image src="/static/dafen/jiudianrt.png"
									style="margin-left: 30rpx;width: 11rpx;height: 21rpx;"></image> -->
							</view>
							<!-- <image class="jdimg" :src="getUrl(item.ImgUrl)"></image> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import szjs from '@/common/shiqu.json'
	export default {
		data() {
			return {
				zuji: { //用户足迹
					hotellist: [],
					maplist: [],
				},
				city: '', //城市
				newdt: {}, //获取地图id
				polygons: [], //多边形覆盖
				markers: [],
			}
		},
		onLoad(opt) {
			if (opt.city) {
				this.city = opt.city
			}
			this.getData()
		},
		methods: {
			markertap(e){
				console.log('我点击',e)
			},
			callouttap(e){
				console.log('我是callouttap',e)
				this.go('/pages6/yishuidafen/jiudianpingfen?Id='+e.detail.markerId)
			},
			godetail(item){
				this.go('/pages6/yishuidafen/jiudianpingfen?Id='+item.Id)
			},
			async getData() {
				var that = this
				const res = await this.getdatas({
					"city": this.city
				}, "/api/Hotel/Footprint")
				if (res.code == 200) {
					this.zuji = res.data

					this.newdt = uni.createMapContext('dt')
					this.polygons = []
					var newpolygons = []
					var zujiName = []
					this.zuji.hotellist.map(item => {
						zujiName.push(item.Province)
					})
					console.log(szjs)
					szjs.features.map(item => {   //把中国用多边形全部覆盖
						var newarr = []
						item.geometry.coordinates[0].map((item3, index3) => {
							item.geometry.coordinates[0][index3].map((item2, index2) => {
								var arr2 = {
									latitude: item2[1],
									longitude: item2[0],
								}
								newarr.push(arr2)
							})
						})
						var index = zujiName.findIndex(a => item.properties.name.indexOf(a) > -1)
						if (index > -1) {   //有这个城市的时候填充要显示颜色
							var data = {
								points: newarr, //设置线覆盖物路径
								fillColor: '#008FD7', //填充颜色
								strokeColor: '#ffffff', //描边颜色
								strokeWidth: 1, //描边宽度
								zIndex: 1, //层级
							}
							newpolygons.push(data)
							this.polygons = newpolygons
						} else {
							var data = {
								points: newarr, //设置线覆盖物路径
								fillColor: '#0B4678', //填充颜色
								strokeColor: '#ffffff', //描边颜色
								strokeWidth: 1, //描边宽度
								zIndex: 1, //层级
							}
							newpolygons.push(data)
							this.polygons = newpolygons
						}

					})
					console.log('我被触发了',this.zuji.hotellist)
					this.zuji.hotellist.map((itemzuji, indexzuji) => {   //给足迹酒店打标记点
						console.log('我被触发了',itemzuji)
						// itemzuji.Lat = 23.25029
						// itemzuji.Lng = 116.4331
						
						if (itemzuji.Lat > 0 && itemzuji.Lng > 0) {
							var biaoji = { // 标记点
								id: itemzuji.Id,
								latitude: itemzuji.Lat,
								longitude: itemzuji.Lng,
								iconPath: '/static/ditudz.png',
								width:13,
								// rotate:90,
								height:19,
								joinCluster: true,
								Name:itemzuji.Name,
								ImgUrl:itemzuji.ImgUrl,
								customCallout: {  
								      anchorY: 0,  
								      anchorX: 0,  
								      display: 'BYCLICK'  
								    },
								callout: {
									// #ifdef APP-PLUS
									    content: itemzuji.Name,
									// #endif
									
									// #ifdef H5
									  content: itemzuji.Name + '  <br><br> ' + '<img src="' + itemzuji.ImgUrl + '" style="width:114px;height:66px;" mode="aspectFill">',
									// #endif
									
									borderWidth: 1,
									borderColor: '#8FE4FF',
									padding: 13,
									borderRadius: 8,
									fontSize: 13,
									color: '#ffffff',
									textAlign: 'left',
									bgColor: '#008FD7',
									display: 'BYCLICK'
								}
							}
							that.markers.push(biaoji)
						}

					})
				}
			},
		}
	}
</script>

<style>
	page {
		background: #265A86 !important;
	}

	page>view {
		background: #265A86 !important;
	}

	.base_body {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	/* 水平，垂直居中 */
	.base_all_center {
		justify-content: center;
		align-items: center;
	}

	/* 垂直居中 */
	.base_center_vertical {
		display: flex;
		align-items: center;
	}

	/* 水平居中 */
	.base_center_horizontal {
		display: flex;
		justify-content: center;
	}

	/* 垂直布局 */
	.base_column {
		display: flex;
		flex-direction: column;
	}

	/* 横向布局 */
	.base_row {
		display: flex;
		flex-direction: row;
	}

	/* 基础dialog */
	.base_dialog {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		background: rgba(0, 0, 0, 0.5);
	}

	.callout{
			width:200rpx;
			height:auto;
			border-radius:6rpx;
			padding:5rpx;
			background-color: #fff;
		}
		.title{
			font-size:12rpx;
		}
	  .map {  
	    width: 750rpx;  
	    height: 600rpx;  
	    background-color: #f0f0f0;  
	  }  
	 
	  .icon {  
	    width: 20rpx;  
	    height: 20rpx;  
	  }
</style>
<style lang="less">
	.padding32env {}

	.jiudian {


		.title {
			font-weight: bold;
			font-size: 32rpx;
			color: #8FE4FF;
			line-height: 105rpx;
		}

		.dianliang {
			padding: 24rpx 36rpx;
			background: #174368;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-bottom: 42rpx;

			.dianliang_1 {
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 1;
				margin-bottom: 22rpx;
			}

			.dianliang_2 {
				font-weight: bold;
				font-size: 60rpx;
				color: #FFFFFF;
				line-height: 1;

				display: flex;
				align-items: flex-end;
			}

			.dianliang_3 {
				font-size: 30rpx;
				color: #FFFFFF;
				margin-left: 12rpx;
				line-height: 52rpx;
			}
		}

	}

	.jiudianlist {
		width: 331rpx;
		height: 269rpx;
		padding: 24rpx;
		background-color: #FFFFFF;
		margin-bottom: 24rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.name {
			font-weight: 500;
			font-size: 30rpx;
			height: 30rpx;
			color: #000000;
			line-height: 30rpx;
			margin-bottom: 24rpx;
		}

		.jdimg {
			width: 283rpx;
			height: 167rpx;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
		}
	}
	
	.callout{
			width:200rpx;
			height:auto;
			border-radius:6rpx;
			padding:5rpx;
			background-color: red;
			z-index: 999;
		}
		.title{
			font-size:12rpx;
		}
	  .map {  
	    width: 750rpx;  
	    height: 600rpx;  
	    background-color: #f0f0f0;  
	  }  
	 
	  .icon {  
	    width: 20rpx;  
	    height: 20rpx;  
	  }
</style>